<template>
  <div>
    <div class="icon-row">
      <!-- 图标代码 -->
      <div class="icon-container">
        <span class="material-icons" @click="route1">meeting_room</span>
        <p @click="route1">接待管理</p>
      </div>

      <div class="icon-container">
        <span class="material-icons" @click="route2">manage_accounts</span>
        <p @click="route2">用户管理</p>
      </div>

      <div class="icon-container">
        <span class="material-icons" @click="route3">local_hospital</span>
        <p @click="route3">护理管理</p>
      </div>

      <div class="icon-container">
        <span class="material-icons" @click="route4">king_bed</span>
        <p @click="route4">床位管理</p>
      </div>

      <div class="icon-container">
        <span class="material-icons" @click="route5">room_service</span>
        <p @click="route5">膳食管理</p>
      </div>

      <div class="icon-container">
        <span class="material-icons" @click="route6">apartment</span>
        <p @click="route6">机构管理</p>
      </div>

      <div class="icon-container">
        <span class="material-icons" @click="route7">people_alt</span>
        <p @click="route7">人事管理</p>
      </div>

      <div class="icon-container">
        <span class="material-icons" @click="route8">inventory</span>
        <p @click="route8">物资管理</p>
      </div>

      <div class="icon-container">
        <span class="material-icons" @click="route9">settings</span>
        <p @click="route9">系统设置</p>
      </div>
    </div>

    <div class="background-container">
      <div
        v-for="(url, index) in urls"
        :key="index"
        :style="{ backgroundImage: 'url(' + url + ')', animationDelay: index * 5 + 's' }"
        class="background-image"
      ></div>
    </div>
    <div class="time-display">
      <h3>当前时间:</h3>
      {{current_time}}
    </div>
    <button class="button-overlay" @click="queryPhoto">员工风采</button>
    <div class="wrap">
      <div class="cube" @click="carousel = !carousel" :style="animationStyle">
        <div class="liang-one">
          <img
            src="http://192.168.2.202:9000/elderlycare/elderlycare_1713758965595.webp"
            class="photo"
          />
        </div>
        <div class="liang-two">
          <img
            src="http://192.168.2.202:9000/elderlycare/elderlycare_1713758823616.webp"
            class="photo"
          />
        </div>
        <div class="liang-three">
          <img
            src="http://192.168.2.202:9000/elderlycare/elderlycare_1713758606916.jpg"
            class="photo"
          />
        </div>
        <div class="liang-four">
          <img
            src="http://192.168.2.202:9000/elderlycare/elderlycare_1713758462234.jpg"
            class="photo"
          />
        </div>
        <div class="liang-five">
          <img
            src="http://192.168.2.202:9000/elderlycare/elderlycare_1713758965595.webp"
            class="photo"
          />
        </div>
        <div class="liang-six">
          <img
            src="http://192.168.2.202:9000/elderlycare/elderlycare_1713606538563.png"
            class="photo"
          />
        </div>
        <span class="liang-front">
          <img
            src="http://192.168.2.202:9000/elderlycare/elderlycare_1713148022866.png"
            class="liang-photo"
          />
        </span>
        <span class="liang-back">
          <img
            src="http://192.168.2.202:9000/elderlycare/elderlycare_1713248815107.png"
            class="liang-photo"
          />
        </span>
        <span class="liang-left">
          <img
            src="http://192.168.2.202:9000/elderlycare/elderlycare_1713349293877.png"
            class="liang-photo"
          />
        </span>
        <span class="liang-right">
          <img
            src="http://192.168.2.202:9000/elderlycare/elderlycare_1713403778985.png"
            class="liang-photo"
          />
        </span>
        <span class="liang-top">
          <img
            src="http://192.168.2.202:9000/elderlycare/elderlycare_1713606538563.png"
            class="liang-photo"
          />
        </span>
        <span class="liang-bottom">
          <img
            src="http://192.168.2.202:9000/elderlycare/elderlycare_1713606538563.png"
            class="liang-photo"
          />
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "wrap",
  data() {
    return {
      carousel: false,
      current_time: new Date().toLocaleString(),
      urls: [
        "http://192.168.2.202:9000/elderlycare/elderlycare_1713758965595.webp",
        "http://192.168.2.202:9000/elderlycare/elderlycare_1713758823616.webp",
        "http://192.168.2.202:9000/elderlycare/elderlycare_1713758606916.jpg",
        "http://192.168.2.202:9000/elderlycare/elderlycare_1713758462234.jpg",
        "http://192.168.2.202:9000/elderlycare/elderlycare_1713758965595.webp",
        "http://192.168.2.202:9000/elderlycare/elderlycare_1713606538563.png"
      ]
    };
  },
  methods: {
    route1() {
      this.$router.push({ path: "rRegister" });
    },
    route2() {
      this.$router.push({ path: "userArc" });
    },
    route3() {
      this.$router.push({ path: "nursingManagement" });
    },
    route4() {
      this.$router.push({ path: "bedList" });
    },
    route5() {
      this.$router.push({ path: "olderFoodLinkView" });
    },
    route6() {
      this.$router.push({ path: "BasicInfo" });
    },
    route7() {
      this.$router.push({ path: "employeeList" });
    },
    route8() {
      this.$router.push({ path: "materialinfoMt" });
    },
    route9() {
      this.$router.push({ path: "dictMaintenance" });
    },
    UpdateTime() {
      this.current_time = new Date().toLocaleString();
    },
    queryPhoto() {
      this.$router.push({ path: "photo" });
    }
  },
  mounted() {
    setInterval(this.UpdateTime, 1000);
  },
  computed: {
    animationStyle() {
      return this.carousel
        ? { animation: "carousel 20s infinite linear" }
        : { animation: "rotate 20s infinite linear" };
    }
  }
};
</script>

<style scoped>
.icon-row {
  display: flex; /* 通过 Flexbox，将子元素排列在一行 */
  justify-content: space-around; /* 在子元素之间均匀分配空间 */
}

.icon-container {
  width: 120px; /* 修改宽度 */
  height: 120px; /* 修改高度 */
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 10px; /* 添加 margin，增加间距 */
}

.material-icons {
  color: black;
  font-size: 36px; /* 修改图标大小 */
}

p {
  margin: 0;
  font-size: 18px; /* 修改文字大小 */
}

.button-overlay {
  position: absolute; /* 使用绝对定位让按钮能够自由移动 */
  cursor: pointer; /* 更改鼠标悬停时的光标样式 */
  padding: 10px 20px; /* 按钮内边距 */
  background: linear-gradient(
    to right,
    rgb(176, 119, 218),
    rgb(129, 214, 238)
  ); /* 渐变效果更换为浅紫色到浅蓝色 */
  color: white; /* 文字颜色 */
  border: none; /* 移除边框 */
  border-radius: 20px; /* 圆角边框 */
  font-size: 16px; /* 字体大小 */
  animation: moveAround 10s infinite alternate, spin 5s infinite linear; /* 应用动画 */
  transition: transform 0.5s ease; /* 过渡效果 */
}

@keyframes moveAround {
  0% {
    top: 25%;
    left: 30%;
    transform: scale(1) rotate(0deg);
  }
  25% {
    top: 25%;
    left: 80%; /* 这里确保left的值会让按钮在右侧不超出范围 */
    transform: scale(1.1) rotate(20deg);
  }
  50% {
    top: 80%; /* 这里确保按钮不会超过父容器的一半高度 */
    left: 80%;
    transform: scale(1) rotate(40deg);
  }
  75% {
    top: 80%;
    left: 80%;
    transform: scale(1.1) rotate(60deg);
  }
  100% {
    top: 80%;
    left: 80%;
    transform: scale(1) rotate(80deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
